<template>
  <div class="has-hover">
    <div class="ko-view">
      <div class="course-page guide-in">
        <div class="course-header">
          <div class="content-container clearfix">
            <router-link :to="{name: type === 'teacher'? 'teacherIndex':'studentIndex'}"
                         class="back-btn pull-left">
              <i class="iconfont icon-left el-icon-arrow-left" style="margin-right: 4px"></i>
              <span>返回课程列表</span>
            </router-link>
            <div class="course-name pull-left">{{ this.item.courseName }}</div>
          </div>

        </div>
        <div class="course-body clearfix content-container">
          <div class="course-nav-menu pull-left">
            <img class="course-cover" :src="this.item.image"/>
            <div class="course-nav">
              <a class="tab-link tab-units"
                 :class="{active: isActive == 1}"
                 @click="change('1',type)">
                <i class="iconfont icon-danyuan pull-left"
                   :class="{iactive: isActive == 1}"></i>
                <span>单元</span>
              </a>
              <div class="divider tab-units"></div>
              <a class="tab-link tab-units"
                 :class="{active: isActive == 2}"
                 @click="change('2',type)">
                <i class="iconfont icon-gonggaoguanli pull-left"
                   :class="{iactive: isActive == 2}"></i>
                <span>公告</span>
              </a>
              <a class="tab-link tab-units"
                 :class="{active: isActive == 3}"
                 @click="change('3',type)">
                <i class="iconfont icon-kejianpeiyin pull-left"
                   :class="{iactive: isActive == 3}"></i>
                <span>课件</span>
              </a>
              <a class="tab-link tab-units"
                 :class="{active: isActive == 4}"
                 @click="change('4',type)">
                <i class="iconfont icon-ziyuan pull-left" style="font-size: 17px"
                   :class="{iactive: isActive == 4}"></i>
                <span>资源</span>
              </a>
              <div class="divider tab-units"></div>
              <a class="tab-link tab-units"
                 :class="{active: isActive == 5}"
                 @click="change('5',type)">
                <i class="iconfont icon-zuoye pull-left"
                   :class="{iactive: isActive == 5}"></i>
                <span>作业</span>
              </a>
              <a class="tab-link tab-units"
                 :class="{active: isActive == 6}"
                 @click="change('6',type)">
                <i class="iconfont icon-canyutaolun pull-left"
                   :class="{iactive: isActive == 6}"></i>
                <span>讨论</span>
              </a>
              <a class="tab-link tab-units"
                 :class="{active: isActive == 7}"
                 @click="change('7',type)">
                <i class="iconfont icon-ketangxueyuan1 pull-left" style="font-size: 19px"
                   :class="{iactive: isActive == 7}"></i>
                <span>课堂</span>
              </a>
              <a class="tab-link tab-units"
                 :class="{active: isActive == 8}"
                 @click="change('8',type)">
                <i class="iconfont icon-zhibo pull-left"
                   :class="{iactive: isActive == 8}"></i>
                <span>直播</span>
              </a>
              <a class="tab-link tab-units"
                 :class="{active: isActive == 9}"
                 @click="change('9',type)">
                <i class="iconfont icon-mulu-kaoshi pull-left"
                   :class="{iactive: isActive == 9}"></i>
                <span>考试</span>
              </a>
              <div class="divider tab-units"></div>
              <a class="tab-link tab-units"
                 :class="{active: isActive == 10}"
                 @click="change('10',type)">
                <i class="iconfont icon-mulu-kaohe pull-left"
                   :class="{iactive: isActive == 10}"></i>
                <span>考核</span>
              </a>
              <a class="tab-link tab-units"
                 :class="{active: isActive == 11}"
                 @click="change('11',type)">
                <i class="iconfont icon-chengyuan pull-left"
                   :class="{iactive: isActive == 11}"></i>
                <span>成员</span>
              </a>
            </div>
          </div>
          <div class="course-content-area pull-left">
            <div class="full-height">
              <div class="ko-view">
                <course-unit v-if="isActive == 1"/>
                <course-announcement v-else-if="isActive == 2"/>
                <course-resource v-else-if="isActive == 4"
                                 :course="item"/>
                <course-homework v-else-if="isActive == 5"
                                  :type="type"
                                  :item="item"/>
                <course-member v-else-if="isActive == 11"
                               :course="item"/>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import CourseUnit from '@/views/common/course/component/CourseUnit'
import CourseResource from '@/views/common/course/component/CourseResource'
import CourseAnnouncement from './component/CourseAnnouncement'
import CourseMember from './component/CourseMember'
import CourseHomework from './component/CourseHomework'

export default {
  components: {
    CourseUnit,
    CourseResource,
    CourseAnnouncement,
    CourseMember,
    CourseHomework,
  },
  data() {
    return {
      item: {
        id: '',
        courseName: '',
        image: '',
        name: '',
      },
      isActive: 2,
      type: '',
    }
  },
  created() {

    this.init()
  },
  methods: {
    // 初始化资源
    async init() {
      // 获取学生页面点击课程传来的课程数据
      this.item = JSON.parse(this.$route.query.item)

      if(this.$route.query.isActive !== undefined){
        this.isActive = JSON.parse(this.$route.query.isActive)
      }
      this.type = localStorage.getItem("type")
    },

    // 切换页面
    change(i, type) {
      this.isActive = i
    }

  }
}
</script>

<style scoped>
div {
  display: block;
  unicode-bidi: isolate;
}

*, :after, :before {
  box-sizing: border-box;
}

.course-header {
  left: 0;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, .15);
  z-index: 10;
  top: 0;
  width: 100%;
  height: 48px;
  line-height: 48px;
}

.content-container {
  /*padding: 0 10px;*/
  margin: auto;
  width: 100% !important;
  min-width: unset;
}

.back-btn {
  margin-right: 20px;
  position: relative;
  z-index: 2;
  width: 228px;
  color: #444;
  text-decoration: none;
}

.pull-right {
  float: right !important;
}

.pull-left {
  float: left !important;
}

.icon-left {
  margin-right: 4px;
  vertical-align: middle;
  color: #cbcbd1;
  font-size: 16px;
  font-style: normal;
}

.course-name {
  margin-left: -250px;
  padding-left: 270px;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 48px;
  font-size: 18px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.course-body {
  padding-top: 48px;
  background-color: #fff;
  margin: auto;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  min-height: 100vh;
  width: 1170px !important;
  min-width: 980px;
}

.course-nav-menu {
  border-right: 1px solid #e3e3e9;
  width: 228px;
  display: inline-block;
  position: relative;
  z-index: 2;
  min-height: calc(100vh - 48px);
}

.course-cover {
  width: 100%;
  border: 0;
  vertical-align: middle;
}

.course-nav {
  padding: 20px 0;
}

.tab-link {
  padding-left: 30px;
  cursor: pointer;
  display: block;
  text-decoration: none;
  font-size: 16px;
  line-height: 44px;
  color: #444;
}

.divider {
  margin: 6px 20px;
  border-bottom: 1px solid #e3e3e9;
}

.iconfont {
  margin-right: 20px;
  position: relative;
  top: 1px;
  color: #cbcbd1;
  font-size: 20px;
  vertical-align: middle;
}

.tab-link:hover {
  background-color: rgba(239, 239, 247, .7);
}

.active {
  color: #7691fc;
  border-left: 4px solid #7691fc;
  padding-left: 26px;
}

.iactive {
  color: #7691fc;
}


.course-content-area {
  margin-left: -228px;
  padding: 24px 32px 100px 260px;
  width: 100%;
  min-height: 835px;
}

.full-height {
  height: 100%;
}

</style>